<template>
	<div v-if="hotComments?.length" class="text-black-50 fs-5 mb-3">精彩评论</div>
	<CommentItem :api="api" :praiseApi="praiseApi" :comments="hotComments" />
	<slot name="hotCommentsBotttom" />
	<div v-if="comments?.length" class="text-black-50 fs-5 mb-3">最新评论</div>
	<CommentItem :api="api" :praiseApi="praiseApi" :comments="comments" />
</template>
<script lang="ts">
import { PropType, reactive, toRefs, watch } from "vue";
type PraiseApi = (cid: number, type: 0 | 1) => Promise<any>;
export default {
	props: {
		api: {
			type: Function,
		},
		praiseApi: {
			type: Function as PropType<PraiseApi>,
		},
		commentObj: {
			type: Object,
			default: () => ({
				hotComments: [],
				comments: [],
			}),
		},
		showAll: {
			type: Boolean,
			default: false,
		},
	},
	setup(props) {
		const state = reactive({
			comments: [],
			hotComments: [],
		});
		watch(
			() => props.commentObj,
			(newV) => {
				state.hotComments = props.commentObj.hotComments;
				state.comments = props.showAll ? props.commentObj.comments : props.commentObj?.comments?.slice(0, 10);
			},
			{ immediate: true }
		);
		return {
			...toRefs(state),
		};
	},
};
</script>
